<template>
  <div class="query1">
    <!-- 跳转并携带query参数（to字符串的写法） -->
    <router-link to="/query2?a=1&b=2&content=欢迎你"> 跳转带参1</router-link>
    <!-- 跳转并携带query参数（to对象的写法） -->
    <router-link
      :to="{
        name: 'query2',
        path: '/query2',
        query: {
          a: 1,
          id: news.id,
          title: news.title,
          content: news.content,
        },
      }"
      >跳转带参2</router-link
    >
    <div>{{ news.content }}</div>
  </div>
</template>
<script lang="ts" setup>
import { reactive, ref } from "vue";
const news: object = reactive({
  id: 1,
  title: "你好",
  content: "欢迎光临",
});
</script>
<style scoped>
.query1 {
  width: 80vw;
  height: 80vh;
  border: 1px solid red;
}
</style>
